/*!
 * Cropper v3.0.0
 */

layui.define(['jquery', 'layer', 'common', 'cropper'], function(exports) {
	var $ = layui.jquery,
		layer = layui.layer,
		common = layui.common;
	var html = "<link rel=\"stylesheet\" href=\"" + common.ctxPath + "/css/cropper.css\">\n" +
		"<div class=\"layui-fluid showImgEdit\">\n" +
		"    <div class=\"layui-form-item margin-top-15\">\n" +
		"        <div class=\"layui-input-inline layui-btn-container width-auto margin-0\">\n" +
		"            <label for=\"cropper_avatarImgUpload\" class=\"layui-btn layui-btn-primary margin-0\">\n" +
		"                <i class=\"layui-icon\">&#xe67c;</i>选择图片\n" +
		"            </label>\n" +
		"            <input class=\"layui-upload-file\" id=\"cropper_avatarImgUpload\" type=\"file\" value=\"选择图片\" name=\"file\" accept=\"image/*\">\n" +
		"        </div>\n" +
		"    </div>\n" +
		"    <div class=\"layui-row layui-col-space15\">\n" +
		"        <div class=\"layui-col-xs9\">\n" +
		"            <div class=\"readyimg\" style=\"height:450px;background-color: rgb(247, 247, 247);\">\n" +
		"                <img src=\"\" >\n" +
		"            </div>\n" +
		"        </div>\n" +
		"        <div class=\"layui-col-xs3\">\n" +
		"            <div class=\"img-preview\" style=\"width:200px;height:200px;overflow:hidden\">\n" +
		"            </div>\n" +
		"        </div>\n" +
		"    </div>\n" +
		"    <div class=\"layui-row layui-col-space15\">\n" +
		"        <div class=\"layui-col-xs9\">\n" +
		"            <div class=\"layui-row\">\n" +
		"                <div class=\"layui-col-xs12\">\n" +
		"                    <button type=\"button\" class=\"layui-btn icon icon-left-rotate\" cropper-event=\"rotate\" data-option=\"-15\" title=\"向左旋转15°\"></button>\n" +
		"                    <button type=\"button\" class=\"layui-btn icon icon-right-rotate\" cropper-event=\"rotate\" data-option=\"15\" title=\"向右旋转15°\"></button>\n" +
		"                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-left\" cropper-event=\"move\" data-x=\"-10\" data-y=\"0\" title=\"向左移动\"></button>\n" +
		"                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-right\" cropper-event=\"move\" data-x=\"10\" data-y=\"0\" title=\"向右移动\"></button>\n" +
		"                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-up\" cropper-event=\"move\" data-x=\"0\" data-y=\"-10\" title=\"向上移动\"></button>\n" +
		"                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-down\" cropper-event=\"move\" data-x=\"0\" data-y=\"10\" title=\"向下移动\"></button>\n" +
		"                    <button type=\"button\" class=\"layui-btn icon icon-zoom-in\" cropper-event=\"zoom\" data-option=\"0.1\" title=\"放大图片\"></button>\n" +
		"                    <button type=\"button\" class=\"layui-btn icon icon-zoom-out\" cropper-event=\"zoom\" data-option=\"-0.1\" title=\"缩小图片\"></button>\n" +
		"                    <button type=\"button\" class=\"layui-btn layui-icon layui-icon-refresh\" cropper-event=\"reset\" title=\"重置图片\"></button>\n" +
		"                </div>\n" +
		"            </div>\n" +
		"        </div>\n" +
		"        <div class=\"layui-col-xs3\">\n" +
		"            <button class=\"layui-btn layui-btn-fluid\" cropper-event=\"confirmSave\" type=\"button\"> 保存修改</button>\n" +
		"        </div>\n" +
		"    </div>\n" +
		"\n" +
		"</div>";
	var obj = {
		render : function(e) {
			$('body').append(html);
			var self = this,
				elem = e.elem,
				saveW = e.saveW,
				saveH = e.saveH,
				mark = e.mark,
				area = e.area,
				url = e.url,
				done = e.done;

			var content = $('.showImgEdit'),
				image = $(".showImgEdit .readyimg img"),
				preview = '.showImgEdit .img-preview',
				file = $(".showImgEdit input[name='file']"),
				options = {
					aspectRatio : mark,
					preview : preview,
					viewMode : 1
				},
				filename = null;

			$(elem).on('click', function() {
				layer.open({
					type : 1,
					content : content,
					area : area,
					success : function() {
						image.cropper(options);
					},
					cancel : function(index) {
						layer.close(index);
						image.cropper('destroy');
					}
				});
			});
			$(".layui-btn").on('click', function() {
				var event = $(this).attr("cropper-event");
				//监听确认保存图像
				if (event === 'confirmSave') {
					if (image.attr('src')) {
						var cropper = image.cropper("getCroppedCanvas", {
							width : saveW,
							height : saveH
						});
						if (cropper) {
							cropper.toBlob(function(blob) {
								var formData = new FormData();
								formData.append('file', blob, filename);
								$.ajax({
									method : "post",
									url : url, //用于文件上传的服务器端请求地址
									data : formData,
									processData : false,
									contentType : false,
									success : function(data) {
										if (data.state == 'ok') {
											layer.closeAll('page');
											return done(data);
										} else {
											layer.msg(data.msg, {
												icon : 5,
												anim : 6
											});
										}

									}
								});
							});
						} else {
							layer.msg('请选择图片！！', {
								icon : 5,
								anim : 6
							});
						}
					} else {
						layer.msg('请先选择一张图片', {
							icon : 5,
							anim : 6
						});
					}
				} else if (event === 'rotate') {
					//监听旋转
					var option = $(this).data('option');
					image.cropper('rotate', option);
				} else if (event === 'move') {
					//监听移动
					var x = $(this).data('x');
					var y = $(this).data('y');
					image.cropper('move', x, y);
				} else if (event === 'zoom') {
					//监听放大/缩小
					var option = $(this).data('option');
					image.cropper('zoom', option);
				} else if (event === 'reset') {
					//重设图片
					image.cropper('reset');
				}
				//文件选择
				file.change(function() {
					var r = new FileReader();
					var f = this.files[0];
					r.readAsDataURL(f);
					r.onload = function(e) {
						image.cropper('destroy').attr('src', this.result).cropper(options);
						filename = f.name;
					};
				});
			});
		}
	};
	exports('croppers', obj);
});